<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Account Information</title>
    <link rel="stylesheet" href="../css/test.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>
<section class="content">
    <main>
        <div class="container">
            <div id="contain">
                <div align="right"><a href="/account/viewAccounts" class="btn-close">return to view Accounts</a></div>
                <div id="mainDiv">
                    <h4>User Information</h4>
                    <table id="table-1">
                        <tr>
                            <td>Account ID:</td>
                            <td th:text="${account.username}">null</td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td th:text="${account.password}"></td>
                        </tr>
                    </table>
                    <div id="inner">
                        <h4>Account Information</h4>
                        <table id="table-3">
                            <tr>
                                <td>First name:</td>
                                <td th:text="${account.firstName}"></td>
                            </tr>
                            <tr>
                                <td>Last name:</td>
                                <td th:text="${account.lastName}"></td>
                            </tr>
                            <tr>
                                <td>Email:</td>
                                <td th:text="${account.email}"></td>
                            </tr>
                            <tr>
                                <td>Phone:</td>
                                <td th:text="${account.phone}"></td>
                            </tr>
                            <tr>
                                <td>Address 1:</td>
                                <td th:text="${account.address1}"></td>
                            </tr>
                            <tr>
                                <td>Address 2:</td>
                                <td th:text="${account.address2}"></td>
                            </tr>
                            <tr>
                                <td>City:</td>
                                <td th:text="${account.city}"></td>
                            </tr>
                            <tr>
                                <td>State:</td>
                                <td th:text="${account.state}"></td>
                            </tr>
                            <tr>
                                <td>Zip:</td>
                                <td th:text="${account.zip}"></td>
                            </tr>
                            <tr>
                                <td>Country:</td>
                                <td th:text="${account.country}"></td>
                            </tr>
                        </table>

                        <h4>Profile Information</h4>

                        <table id="table-2">
                            <tr>
                                <td>Language:</td>
                                <td th:text="${account.languagePreference}"></td>

                            </tr>
                            <tr>
                                <td>Favourite Category:</td>
                                <td th:text="${account.favouriteCategoryId}"></td>
                            </tr>
                            <tr>
                                <td><a th:href="@{/account/viewAccountLogs(accountId=${account.username})}"
                                       class="btn-close">Logs</a></td>
                                <td><a th:href="@{/order/customerOrder(userId=${account.username})}" class="btn-close">Orders</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>
</section>
<div th:replace="common/bottom"></div>
</body>
</html>